<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>webpack主要用来处理js文件，以及他们之间的相互依赖便于我们进行模块化开发</h2>
<h2 style="color:red">npm下载依赖的一般过程：(在当前工作根目录下下载相应的包命令由：npm install --save-dev 包名@版本号)->webpack.config.js(匹配包文件和需要使用的loader)->require(入口文件中引入样式文件)->package.json(运行npm run 将新引入的文件打包到总包文件里)->在html页面通过src引入总的包文件</h2>
<h2>删除依赖方法：1.npm uninstall --save 包名@版本号；2.直接进node_module找到指定包删除并删除package.json和webpack.config.js里的配置，重新下载对应依赖；3.更改package.json里的依赖版本根据webstrom弹窗提示下载新的依赖</h2>
<ul>1.webpack.config.js按标准命名
    <li>主要定义了引用模块在打包时的入口和出口文件，并通过node的path模块动态获取打包文件目录</li>
</ul>
<ul>2.关于package.json的注意点：由npm init命令产生
    <li>一般情况下终端直接执行的命令都是全局的，要想使用局部包，必须进入对应包的目录</li>
    <li>package.json内部的jscripts对象是用来定义终端执行的命令即{快捷命令：脚本文件}</li>
    <li>如果在package.json内部定义了命令那么在终端执行时会优先使用本地下载好的包</li>
    <li>当我们在终端使用webpack相关命令时会以{npm run 快捷命令}的形式进行，所以最好进行设置</li>
    <li>下载好的包文件版本信息会在package.json内显示，真正的文件体在webpack文件包内（node_module）</li>
    <li>dependencies为运行时依赖，另一个为开发时依赖</li>
</ul>
<ul>3.关于package-lock.json：由npm install产生
    <li>如果webpack.config.json需要node相关的依赖此文件可以帮助我们安装</li>
<li>版本前面的^~表示版本范围</li>
</ul>
<ul>
    4.样式处理，预处理（正常步骤引入即可此处主要是样式）：当我们下载webpack时需要用到有关style之类的loader，要注意版本的对应关系，否则会因不兼容报错,要想正确显示必须style,和css同时安装<li>此时需要我们删除webpack版本重新下载，并下载对应的loader</li>
    <li>下载style和cssloader</li>
    <li>下载完成需要在webpack.config.js内部对模块引用进行设置,编译时配置从右往左读取</li>
    <li>在入口main文件当中引入</li>
</ul>
<ul>5.图片处理：当我们引入图片时我们需要下载url.loader和file_loader两个文件，配置时只需引入url_loader即可
    <li>图片处理url_loader,主要是use里面的options的limt和name属性可以自动帮我们处理图片展示方式和打包路径名字</li>
    <li></li>
    <li>url_loader：当图片属性小于limt时会以此方式载入，将图片转换成base64字符串格式进行展示</li>
    <li>file_loader:不需要引入但需要在webpack.config.json的export.output导入图片路径，因为他会将图片转换成哈希值保存在dist也就是打包文件夹下面</li>
</ul>
<ul>6.当我们需要将自己编写的js脚本文件当中的ES6文件转化成ES5时我们需要下载安装babel
    <li>具体命令： npm install --save-dev babel-loader@7 babel-core babel-preset-es2015</li>
    <li>官方由相应的版本命令，不同版本webpack.config.js里的依赖配置也不同</li>
</ul>
<ul>7.vue
    <li>首先下载安装vue:npm install --save vue 会下载安装最新版本的运行时依赖</li>
    <li>同时需要在webpack.config.js内部export添加属性resolve指定vue在编译时的版本路径，最后打包运行</li>
    <li>在main.js内部使用import引入不需要指定文件路径，因为vue为一个默认导出的值并且下载后也会进入webpack的包文件目录里面</li>
    <li>引入之后要编写vue代码</li>
    <li>在index.html内部使用</li>
    8.vue结构化书写过渡
    <li>在webpack当中我们需要使用在实例中使用template属性，将bom中的内容抽离出来</li>
    <li>将bom中的内容和操作抽离成一个独立的子组件，在父组件中使用template：'子组件标签名'与bom建立联系</li>
    9.vue结构化书写终极方案（主要就是使用template标签抽取结构，子组件抽取数据）
    （1）html创建标签，设置挂载值
    （2）vue组件的创建
    <li>导入vue，创建组件直接使用new Vue，挂载父标签，注册子组件，并使用template属性引入子组件模板</li>
    构建抽离出的vue文件
    <li>下载loader和配置文件：npm install --save-dev vue-loader@13.0.0 vue-template-compiler@2.5.21</li>
    <li>该文件类型为vue component应该是一个src目录下的vue目录文件，分为三部分即：template+script+style</li>
    <li style="color:red">抽离出的组件可以没有命名。直接添加数据和方法属性，但是在父组件引入时要保证【导入的名字=template使用的标签名=子注册的标签名】;存在多层嵌套时，先导入子组件文件，再在父级内部注册，最后在模板内使用子标签引入</li>
    <li>template:为bom中的标签内容，需要有一个root标签</li>
    <li>script:包含组件的数据和方法由export default导出，通过直接定义组件的方法，定义标签名字</li>
    <li>style:对标签添加样式，做法与html相同</li>
</ul>
</body>
</html>